<template>
  <div class="list">
    <router-link :to="href">
      <div class="list__img">
        <img-box
          :width="288"
          :height="182"
          :imgSrc="item.coverUrl"
        >
        </img-box>
      </div>
      <div class="list__text xui-padding-sm">
        <h4 class="xui-text-truncate">{{item.title}}</h4>

        <span>主讲人 | 朱乃诚</span>
        <div class="xui-fc xui-margin-top-xs">
          <span>2018年1月20日</span>
          <span class="num">
            <i class="iconfont icon-user1"></i>
            360
          </span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import ImgBox from "@/components/widge/img-box";

export default {
  components: {
    "img-box": ImgBox
  },
  props: {
    item: Object,
    href: String
  }
};
</script>

<style lang="less" scoped>
.list {
  width: 289px;
  border: 1px solid #e7e6dd;
}
.list a {
  cursor: pointer;
}
.list a:hover .list__text {
  background-color: #dda631;
}
.list a:hover .list__text span {
  color: #fff;
}
.list a:hover .list__text h4 {
  color: #fff;
}
.list .list__text h4 {
  font-size: 16px;
  font-weight: normal;
  color: #000;
  margin-bottom: 15px;
}
.list .list__text span {
  font-size: 14px;
  color: #999bad;
}
.num {
  float: right;
}
</style>
